<template>
  <div class="flex flex-col w-full px-12">
    <div class="flex mt-4">
      <Menu v-for="(item, index) in overview" :key="index" :menu="item" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, reactive, ref, unref, h, watch } from 'vue';
  import Menu from '@/components/Menu.vue';
  import model_png from '@/assets/images/model.png';
  import interface_png from '@/assets/images/interface.png';
  import controller_png from '@/assets/images/controller.png';

  const overview = reactive([
    {
      name: 'API请求模板',
      img: interface_png,
      num_bg: 'interface',
    },
    {
      name: 'interface模板',
      img: controller_png,
      num_bg: 'controller',
    },
    {
      name: '业务数据模板',
      img: model_png,
      num_bg: 'model',
    },
    {
      name: 'Vue文件模板',
      img: model_png,
      num_bg: 'model',
    },
  ]);
</script>

<style lang="less" scoped></style>
